<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>创建订单</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />

    <!-- BEGIN PAGE LEVEL STYLES -->
    <link href="<%=request.getContextPath()%>/themes/bootstrap/css/bootstrap-fileupload.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/themes/bootstrap/css/select2.css" />

    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/themes/bootstrap/css/chosen.css" />

    <link href="<%=request.getContextPath()%>/themes/bootstrap/css/datepicker.css" rel="stylesheet" type="text/css"/>

    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/themes/bootstrap/css/multi-select-metro.css">

    <!-- END PAGE LEVEL STYLES -->
    <style>
        .form-horizontal .control-label  {
            width: 80px;
        }
        .form-horizontal .controls {
            margin-left: 100px;
        }
    </style>

</head>
<body >
<!--内容开始 -->
<div class="row-fluid">

    <div class="span12">

        <div class="portlet box blue" id="form_wizard_1">

        <div class="portlet-title">

            <div class="caption">

                <i class="icon-reorder"></i> 添加订单信息

            </div>

        </div>

        <div class="portlet-body form">

        <form action="order/doAdd" class="form-horizontal" id="submit_form">

        <div class="form-wizard">

        <div class="navbar steps">

            <div class="navbar-inner">

                <ul class="row-fluid">

                    <li class="span3">

                        <a href="#tab1" data-toggle="tab" class="step active">

                            <span class="number">第一步</span>

                            <span class="desc"><i class="icon-ok"></i>客户基本信息</span>

                        </a>

                    </li>

                    <li class="span3">

                        <a href="#tab3" data-toggle="tab" class="step">

                            <span class="number">第二步</span>

                            <span class="desc"><i class="icon-ok"></i>配置项目</span>

                        </a>

                    </li>

                    <li class="span3">

                        <a href="#tab2" data-toggle="tab" class="step">

                            <span class="number">第三步</span>

                            <span class="desc"><i class="icon-ok"></i>分配医院</span>

                        </a>

                    </li>



                    <li class="span3">

                        <a href="#tab4" data-toggle="tab" class="step">

                            <span class="number">第四步</span>

                            <span class="desc"><i class="icon-ok"></i>确认</span>

                        </a>

                    </li>

                </ul>

            </div>

        </div>

        <div id="bar" class="progress progress-success progress-striped">

            <div class="bar"></div>

        </div>

        <div class="tab-content">

        <div class="alert alert-error hide">

            <button class="close" data-dismiss="alert"></button>

            验证不通过,请查看如下信息.

        </div>

        <div class="alert alert-success hide">

            <button class="close" data-dismiss="alert"></button>

            验证通过!

        </div>

        <div class="tab-pane active" id="tab1">

            <h3 class="block">请输入顾客基本信息</h3>

            <div class="control-group">

                <label class="control-label">姓名<span class="required">*</span></label>

                <div class="controls">

                    <input type="text" class="span6 m-wrap" name="username" id="username" placeholder="请输入顾客名称"/>

                </div>

            </div>



            <div class="control-group">

                <label class="control-label">性别<span class="required">*</span></label>

                <div class="controls">

                    <label class="radio">

                        <div class="radio"><span><input type="radio" id="male"  name="sex" value="0" data-title="Male" checked></span></div>

                        男

                    </label>

                    <div class="clearfix"></div>

                    <label class="radio">

                        <div class="radio"><span><input type="radio" id="female" name="sex" value="1" data-title="Female"></span></div>

                        女

                    </label>

                    <div id="form_gender_error"></div>

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">年龄<span class="required">*</span></label>

                <div class="controls">

                    <input type="number" class="span6 m-wrap" name="age" id="age" placeholder="请输入顾客年龄"/>

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">电话<span class="required">*</span></label>

                <div class="controls">

                    <input type="text" class="span6 m-wrap" name="tel" id="tel" placeholder="请输入顾客电话"/>

                </div>

            </div>


            <div class="control-group">

                <label class="control-label">地区<span class="required">*</span></label>

                <div class="controls">

                    <select id="seachprov" name="addressseachprov" class="span2" onchange="changeComplexProvince(this.value, sub_array, 'seachcity', 'seachdistrict');">
                    </select>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <select id="seachcity" name="addresshomecity" class="span2"  onchange="changeCity(this.value,'seachdistrict','seachdistrict');">
                    </select>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <select id="seachdistrict" name="addressseachdistrict" class="span2"></select>

                </div>

            </div>


            <div class="control-group">

                <label class="control-label">美丽留言<span class="required">*</span></label>

                <div class="controls">

                    <textarea  class="span6 m-wrap" rows="5" name="userMessage" id="userMessage" placeholder="顾客说了点啥"></textarea>

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">备注<span class="required">*</span></label>

                <div class="controls">

                    <textarea  class="span6 m-wrap" rows="5" name="note" id="note" placeholder="给医院捎句话"></textarea>

                </div>

            </div>


        </div>

        <div class="tab-pane" id="tab2">

            <h3 class="block">选择医院</h3>
            <div class="control-group">

                <label class="control-label">医院<span class="required">*</span></label>

                <div class="controls">
                    <div class="row-fluid">
                        <div class="span6 m-wrap">
                            <table class="table table-bordered table-hover" id="hospitalTable">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>医院名称</th>
                                    <th>特色项目</th>
                                    <th>状态</th>
                                    <th>分派项目</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                        <div class="span6 m-wrap">
                            <div class="row-fluid">

                                <select id="provincelist" class="span3 m-wrap" onchange="changeComplexProvince(this.value, sub_array, 'citylist', null);">
                                </select>
                                <select id="citylist" class="span3 m-wrap">
                                </select>
                                <select id="countylist" class="span3 m-wrap" style="display: none;">
                                </select>
                                <button type="button" class="btn blue" onclick="refreshHospital();">查询</button>
                            </div>

                            <div class="row-fluid">

                            <div class="span12 responsive" data-tablet="span12 fix-offset" data-desktop="span12">

                            <!-- BEGIN EXAMPLE TABLE PORTLET-->

                            <div class="portlet box grey">

                            <div class="portlet-title" style="background-color: #BBBBBB;">



                            </div>

                            <div class="portlet-body">

                                <table class="table table-striped table-bordered table-hover"  id="hospitalListTable">

                                    <thead>

                                    <tr>

                                        <th>医院ID</th>
                                        <th>医院名称</th>
                                        <th class="hidden-480">特色项目</th>
                                        <th class="hide">特色项目</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>

                            </div>

                            </div>

                            <!-- END EXAMPLE TABLE PORTLET-->

                            </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <div class="tab-pane" id="tab3">

            <h3 class="block">配置项目</h3>

            <div class="control-group">

                <label class="control-label">项目<span class="required">*</span></label>

                <div class="controls">
                    <div class="row-fluid">
                        <div class="span6 m-wrap">
                            <table class="table table-bordered table-hover" id="proTable">
                                <thead>
                                <tr>
                                    <th>项目名称</th>
                                    <th>最低消费</th>
                                    <th>最高消费</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                        <div class="span6 m-wrap">
                            <select id="partlist" class="span7 m-wrap" onchange="changePart()">
                                <c:forEach var="part" items="${partArray}">
                                   <option value="${part.id}">${part.partName}</option>
                                </c:forEach>
                            </select>
                            <select id="parlistDetail" class="span7 m-wrap" multiple="multiple" data-placeholder="选择项目" tabindex="1">
                                <c:forEach var="pro" items="${projectArray}">
                                   <option value="${pro.id}">${pro.projectName}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                </div>

            </div>


        </div>

        <div class="tab-pane" id="tab4">

            <h3 class="block">确认输入信息</h3>

            <h4 class="form-section">订单详情</h4>

            <div class="control-group">

                <label class="control-label">顾客姓名:</label>

                <div class="controls">

                    <span class="text display-value" data-display="username"></span>

                </div>

            </div>
            <div class="control-group">

                <label class="control-label">顾客性别:</label>

                <div class="controls">

                    <span class="text display-value" data-display="sex"></span>

                </div>

            </div>
            <div class="control-group">

                <label class="control-label">顾客年龄:</label>

                <div class="controls">

                    <span class="text display-value" data-display="age"></span>

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">顾客电话:</label>

                <div class="controls">

                    <span class="text display-value" data-display="tel"></span>

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">顾客地址:</label>

                <div class="controls">

                    <span class="text display-value" data-display="address"></span>

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">美丽留言:</label>

                <div class="controls">

                    <span class="text display-value" data-display="note"></span>

                </div>

            </div>


            <div class="control-group">

                <label class="control-label">项目:</label>

                <div class="controls">

                    <span class="text display-value" data-display="proTable"></span>

                </div>

            </div>


            <div class="control-group">

                <label class="control-label">分配医院:</label>

                <div class="controls">

                    <span class="text display-value" data-display="hospitalTable"></span>

                </div>

            </div>

        </div>

        </div>

        <div class="form-actions clearfix">

            <a href="javascript:;" class="btn button-previous">

                <i class="m-icon-swapleft"></i>上一步

            </a>

            <a href="javascript:;" class="btn blue button-next">

                下一步 <i class="m-icon-swapright m-icon-white"></i>

            </a>

            <a href="javascript:;" class="btn green button-submit">

                提交 <i class="m-icon-swapright m-icon-white"></i>

            </a>

        </div>

        </div>

        </form>

        </div>

        </div>

    </div>

</div>


<!--内容结束 -->


<!-- BEGIN PAGE LEVEL PLUGINS -->

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/bootstrap-fileupload.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/jquery.validate.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/additional-methods.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/jquery.bootstrap.wizard.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/chosen.jquery.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/select2.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/bootstrap-datepicker.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/date.js"></script>


<!-- END PAGE LEVEL PLUGINS -->

<!-- BEGIN PAGE LEVEL SCRIPTS -->

<script src="<%=request.getContextPath()%>/themes/bootstrap/js/app.js"></script>

<script src="<%=request.getContextPath()%>/script/order.js"></script>

<script src="<%=request.getContextPath()%>/script/Area.js"></script>

<script src="<%=request.getContextPath()%>/script/AreaData_min.js"></script>

<script src="<%=request.getContextPath()%>/script/order-table-managed.js"></script>

<script src="<%=request.getContextPath()%>/script/common.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/jquery.dataTables.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/DT_bootstrap.js"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script>
    var customerProject=new Array();
    jQuery(document).ready(function() {
        // initiate layout and plugins
        App.init();

        FormWizard.init();

        TableManaged.init(44);

        initComplexArea('seachprov', 'seachcity', 'seachdistrict', area_array, sub_array, '44', '0', '0');

        initComplexArea('provincelist', 'citylist', 'countylist', area_array, sub_array, '44', '0', '0');
        //选择项目
        $("#parlistDetail").live("click",function(){
            var objValue=$("#parlistDetail option:selected").val();
            var objText=$("#parlistDetail option:selected").text();
            var i=0;
            $("#proTable").find("tr").each(function(){
                var tempVal=$(this).children("td").eq(0).html();
                if(tempVal==objText){
                    alert("此条项目已经被选择过了!");
                    i++;
                    return;
                }
            });
            if(i==0){
                $("#proTable").append("<tr><td>"+objText+"</td><td><input id='"+objValue+"_min' type='number' name='"+objValue+"_min' class='span6 m-wrap' /></td><td><input id='"+objValue+"_max' type='number' name='"+objValue+"_max'  class='span6 m-wrap' /></td><td><span class='btn red' onclick='deleteProjectRow(this)'>删除</span></td></tr>");
                $("#"+objValue+"_min").rules("add",{required : true,min:1,messages:{required:"此项必填",min:"必须是正数"}});
                $("#"+objValue+"_max").rules("add",{required : true,min:1,messages:{required:"此项必填",min:"必须是正数"}});
                customerProject.push(objText);
            }

        });
        //选择医院
        $("#hospitalListTable>tbody>tr").live("click",function(){
            var hospitalId=$(this).children("td").eq(0).html();
            var choose=false;
            $("#hospitalTable>tbody>tr").each(function(){
                var tempVal=$(this).children("td").eq(0).html();
                if(tempVal==hospitalId){
                    alert("该医院已经被选择过了!");
                    choose=true;
                    return;
                }
            });
            var teseprojects=$(this).children("td").eq(2).html();
            var teseprojectsarr=teseprojects.split(",");
            if(!choose){//如果未被选择过，则加入被选列表，并设置select2控件

                var clonetr=$(this).clone();

                var tdd='<input id="select2_'+hospitalId+'" type="hidden" class="span12" value="">';

                var app=clonetr.append("<td>未接单</td><td>"+tdd+"</td><td><span class='btn red' onclick='deleteRow(this)'>删除</span></td>");
                $("#hospitalTable>tbody").append(app);

                //初始化该条记录的select2控件
                $("#select2_"+hospitalId).select2({
                    tags:customerProject
                }).on("select2-selecting", function(e) {
                    console.info(e.choice.text);
                    console.info ("selecting val="+ e.val+" choice="+ JSON.stringify(e.choice));
                    if(teseprojectsarr.indexOf(e.choice.text)==-1){
                        alert("未与该医院签订该项目");
                        return false;
                    }
                });


            }

        });

    });


    function refreshHospital(){
        TableManaged.init($("#provincelist option:selected").val(),$("#citylist option:selected").val());
    }
    function beforeChangePart(){
        $("#parlistDetail").empty();
    }
    function callbcakChangePart(cb){
        $(cb).each(function(){
            $("#parlistDetail").append("<option value="+this.id+">"+this.projectName+"</option>");
        });
    }
    function  changePart(){
        var obj=$("#partlist option:selected").val();
        getData("POST","getProjectByPartId",false,"partId="+obj,"beforeChangePart",null,"callbcakChangePart");
    }

    function deleteRow(obj){
        $(obj).parent().parent().remove();
    }
    /**
    * 删除已选择项目
    * @param obj
     */
    function deleteProjectRow(obj){
        var $tr=$(obj).parent().parent();
        var projectname=$tr.children("td").eq(0).html();

        //从已选择项目的数组中移除该项目
        customerProject.splice($.inArray(projectname,customerProject),1);
        console.info(customerProject);

        $tr.find("input[name$='min']").each(function(){
            $(this).rules("remove", "required");
        });
        $tr.find("input[name$='max']").each(function(){
            $(this).rules("remove", "required");
        });

        $("input[id^=select2_]").each(function(){
            $(this).select2({
                tags:customerProject
            });
        });
        $tr.remove();
    }

</script>

</body>
</html>